<template>
  <view>
    <input
      class="h-input"
      :type="type"
      :password="password"
      :placeholder="placeholder"
      :focus="false"
      :selectionStart="selectionStart"
      :selectionEnd="selectionEnd"
      :maxlength="maxlength"
      :placeholderClass="placeholderClass"
      :value="value"
      :holdKeyboard="holdKeyboard"
      :randomNumber="randomNumber"
      :disabled="disabled"
      :cursorSpacing="cursorSpacing"
      :cursor="cursor"
      @input="handleInputData"
      @focus="handleFocus"
      @blur="handleBlur"/>
  </view>
</template>

<script>
export default {
  name: 'hInput',
  inject: {
    hFormItem: {
      from: 'hFormItem',
      default() {
        return null
      }
    }
  },

  props: {
    value: {
      type: [String, Number],
      default: ''
    },
    placeholder: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: 'text'
    },
    password: {
      type: Boolean,
      default: false
    },
    selectionStart: {
      type: Number,
      default: -1
    },
    selectionEnd: {
      type: Number,
      default: -1
    },
    holdKeyboard: {
      type: Boolean,
      default: false
    },
    randomNumber: {
      type: Boolean,
      default: false
    },
    maxlength: {
      type: Number,
      default: 140
    },
    placeholderClass: {
      type: String,
      default: 'h-input-placeholder'
    },
    disabled: {
      type: Boolean,
      default: false
    },
    cursorSpacing: {
      type: Number,
      default: 0
    },
    cursor: {
      type: Number
    }
  },
  data() {
    return {
      inputValue: '',
    }
  },
  mounted() {
    this.inputValue = this.value
  },
  methods: {
    handleInputData(e) {
      this.inputValue = e.detail.value
      this.$emit('input', e.detail.value)
      this.$emit('change', e.detail.value)
      if(this.hFormItem) {
        this.hFormItem.onFieldChange(e.detail.value)
      }
    },
    handleFocus() {
      this.$emit('focus', this.value)
    },
    handleBlur(e) {
      this.$emit('input', e.detail.value)
      this.$emit('blur', e.detail.value)
      if(this.hFormItem) {
        this.hFormItem.onFieldBlur(e.detail.value)
      }
    }
  },
  components: {
  }
}
</script>

<style>
.h-input {
  color: #333;
  font-size: 28rpx;
  height: auto;
}
.h-input-placeholder {
  color: #888787;
  font-size: 28rpx;
}
</style>
